<template>
  <div style="height:100%">
    <el-select v-model="selectVal" @change="add" class="select">
      <el-option label="300" value="1"></el-option>
      <el-option label="500" value="2"></el-option>
    </el-select>
    <div id="bigemap" ></div>
  </div>
</template>

<script>

export default {
  name:'bigMapDemo',
  data(){
    return {
      map:null,
      selectVal:'',
      heat:null
    }
  },

  methods:{
    add(val){
      
      if(this.heat) this.heat._canvas.parentNode.removeChild(this.heat._canvas)
      setTimeout(()=>{
        if(val == '1'){
          this.heat = BM.heatLayer([[23.039393450126127,113.48061370849608],[32.8657,115.806  ],[37.33, 126.58],[35.8628,103.803],[26.4709,106.6382],[26.4609,106.6282],[26.4509,106.6182],[26.4809,106.6382],[26.4809,106.6282],[26.4809,106.6182]],{radius:20,minOpacity:0.5,gradient:{0.4: 'blue', 0.65: 'lime', 1: 'red'}}).addTo(this.map);
        }else{
          this.heat = BM.heatLayer([[33.039393450126127,123.48061370849608],[39.8657,115.806  ],[31.33, 126.58],[36.8628,103.803],[32.4709,106.6382],[29.4609,106.6282],[29.4509,106.6182],[29.4809,106.6382],[29.4809,106.6282],[29.4809,106.6182]],{radius:20,minOpacity:0.5,gradient:{0.4: 'blue', 0.65: 'lime', 1: 'red'}}).addTo(this.map);
        }
      })
    },
    initMap(){
      let _this = this
      //创建地图
      //  this.map = BM.map('bigemap', null, { center: [23.039393450126127,113.48061370849608], zoom: 5, zoomControl: true,attributionControl:false });
      this.map = BM.map('bigemap', 'bigemap.zhongkexingtu', { center: [23.039393450126127,113.48061370849608], zoom:5,minZoom:3,maxZoom:14, zoomControl: true,attributionControl:false });

      this.selectVal = '2'
      // this.add(2)


      // 交战动画
      this.confront( [115.806 , 32.8657 ],[126.58 , 37.33 ],[[103.803,35.8628],[106.6382,26.4809]])
            
      // 地图缩放等级监听
      this.mapZoom()
    },
    //交战动画
    confront(coordinates,value,values){
      // 交战中心 点
      let center = JSON.parse(JSON.stringify(coordinates)).reverse()
      let map = this.map
      var marker=BM.marker(center).addTo(map);
      marker.setIcon(BM.icon({
        iconUrl: 'https://wimg.588ku.com/gif620/22/02/14/206b23069c4c61559d5144d2d495ba37.gif',
        iconSize: [80, 80],
        iconAnchor: [40, 40], //偏移位置 0 0为左上角
      }))

      // 将维度范围放大
      let datas = this.coordinatesProcess(coordinates)


      var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data; i++) {
              var fromCoord = value;  //
              var toCoord = datas[i];
              if (fromCoord && toCoord) {
                  res.push({
                      // fromName: dataItem[0].name,
                      // toName: dataItem[1].name,
                      coords: [fromCoord, toCoord]
                  });
              }
          }
          return res;
      };
      var convertData_copy = function (to,from) {
          var res = [{
                      // fromName: dataItem[0].name,
                      // toName: dataItem[1].name,
                      coords: [from, to]
                  }];
          return res;
      };

      var attackSeries = [];
      attackSeries.push(
        // 飞行图案后面的弧
        {
          name:value,
          type: 'lines',
          coordinateSystem: 'leaflet',
          zlevel: 1,
          effect: {
              show: true,
              period: 3, //弧飞行的速度
              trailLength: 0.7,
              color: 'red',
              symbolSize: 3
          },
          lineStyle: {
              normal: {
                  color: '#a6c84c',
                  width: 0,
                  curveness: 0.2
              }
          },
          data: convertData(3)
        },
        // 线
        {             
            name:value,
            type: 'lines',
            coordinateSystem: 'leaflet',
            zlevel: 2,
            symbol: ['none', 'none'],  //修改线段两头的样式  箭头arrow 不展示none 也可以自定义
            symbolSize: 0, //修改线段两头的大小
            // 图属性
            effect: {
                show: true,
                period: 3,  //飞行的速度
                trailLength: 0,
                // symbol: planePath,  //线上面的图
                symbol: 'path://M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z',  //线上面的图
                symbolSize: 20,
                color:'red'  //图颜色
            },
            //线属性
            lineStyle: {
                normal: {
                    color: '#ccc', 
                    width: 10,
                    opacity: 0.6,
                    curveness: 0.2
                }
            },
            data:convertData(3)
        }
        );
      let attackOption = {
          legend: {
              orient: 'vertical',
              top: 'top',
              left: 'right',
              data: value,
              textStyle: {
                  color: '#fff'
              },
              selectedMode: 'multiple',
              backgroundColor: 'rgba(128, 128, 128, 0.5)'
          },
          series: attackSeries
      };
      let attackEchart = BM.supermap.echartsLayer(attackOption).addTo(map);


      // 延迟防守
      setTimeout(()=>{
        // 防守点
        var guardSeries = [];
        values.forEach(function (item, i) {

          guardSeries.push(
            // 飞行图案后面的弧
            {
              name:'防守',
              type: 'lines',
              coordinateSystem: 'leaflet',
              zlevel: 1,
              effect: {
                  show: true,
                  period: 3, //弧飞行的速度
                  trailLength: 0.7,
                  color: 'green',
                  symbolSize: 3
              },
              lineStyle: {
                  normal: {
                      color: '#a6c84c',
                      width: 0,
                      curveness: 0.2
                  }
              },
              data: convertData_copy(datas[1],item)
            },
            // 线
            {             
                name:'防守',
                type: 'lines',
                coordinateSystem: 'leaflet',
                zlevel: 2,
                symbol: ['none', 'none'],  //修改线段两头的样式  箭头arrow 不展示none 也可以自定义
                symbolSize: 0, //修改线段两头的大小
                // 图属性
                effect: {
                    show: true,
                    period: 3,  //飞行的速度
                    trailLength: 0,
                    // symbol: planePath,  //线上面的图
                    symbol: 'path://M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z',  //线上面的图
                    symbolSize: 20,
                    color:'green'  //图颜色
                },
                //线属性
                lineStyle: {
                    normal: {
                        color: '#ccc', 
                        width: 10,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data:convertData_copy(datas[1],item)
            },
          );
        });

        let guardOption = {
            legend: {
                orient: 'vertical',
                top: 'top',
                left: 'right',
                data: value,
                textStyle: {
                    color: '#fff'
                },
                selectedMode: 'multiple',
                backgroundColor: 'rgba(128, 128, 128, 0.5)'
            },
            series: guardSeries
        };
        let guardEchart = BM.supermap.echartsLayer(guardOption).addTo(map);

        
        var activeIcon = BM.divIcon({
          className: 'my-div-icon',
          html: `<div><span class="pulse-icon"></span></div>`,
        });
        marker.setIcon(activeIcon)

        setTimeout(()=>{
          // marker.remove()
          // guardEchart._echartsContainer.parentNode.removeChild(guardEchart._echartsContainer);
          // attackEchart._echartsContainer.parentNode.removeChild(attackEchart._echartsContainer);

        },3000) 


      },2000) 

    },
    // 扩散纬度
    coordinatesProcess(coordinates){
      let datas = []
      datas[0] = [coordinates[0],coordinates[1]+1.5]
      datas[1] = coordinates
      datas[2] = [coordinates[0],coordinates[1]-1.5]
      return datas
    },
    // 地图缩放
    mapZoom() {
        this.map.on("zoomend",  (e)=> {
          // console.log(this.map.getZoom())
        })
      }
    // 备份
    // confront(){
    //   let map = this.map
    //   var geoCoordMap = {
    //     '阜阳': [115.806 , 32.8657 ],
    //     '首尔': [126.58 , 37.33 ],
    //     '首尔': [126.58 , 37.33 ],
    //     '上海': [121.4648, 31.2891],
    //     '东莞': [113.8953, 22.901],
    //     '东营': [118.7073, 37.5513],
    //     '中山': [113.4229, 22.478],
    //     '临汾': [111.4783, 36.1615],
    //     '临沂': [118.3118, 35.2936],
    //     '丹东': [124.541, 40.4242],
    //     '丽水': [119.5642, 28.1854],
    //     '乌鲁木齐': [87.9236, 43.5883],
    //     '佛山': [112.8955, 23.1097],
    //     '保定': [115.0488, 39.0948],
    //     '兰州': [103.5901, 36.3043],
    //     '包头': [110.3467, 41.4899],
    //     '北京': [116.4551, 40.2539],
    //     '北海': [109.314, 21.6211],
    //     '南京': [118.8062, 31.9208],
    //     '南宁': [108.479, 23.1152],
    //     '南昌': [116.0046, 28.6633],
    //     '南通': [121.1023, 32.1625],
    //     '厦门': [118.1689, 24.6478],
    //     '台州': [121.1353, 28.6688],
    //     '合肥': [117.29, 32.0581],
    //     '呼和浩特': [111.4124, 40.4901],
    //     '咸阳': [108.4131, 34.8706],
    //     '哈尔滨': [127.9688, 45.368],
    //     '唐山': [118.4766, 39.6826],
    //     '嘉兴': [120.9155, 30.6354],
    //     '大同': [113.7854, 39.8035],
    //     '大连': [122.2229, 39.4409],
    //     '天津': [117.4219, 39.4189],
    //     '太原': [112.3352, 37.9413],
    //     '威海': [121.9482, 37.1393],
    //     '宁波': [121.5967, 29.6466],
    //     '宝鸡': [107.1826, 34.3433],
    //     '宿迁': [118.5535, 33.7775],
    //     '常州': [119.4543, 31.5582],
    //     '广州': [113.5107, 23.2196],
    //     '廊坊': [116.521, 39.0509],
    //     '延安': [109.1052, 36.4252],
    //     '张家口': [115.1477, 40.8527],
    //     '徐州': [117.5208, 34.3268],
    //     '德州': [116.6858, 37.2107],
    //     '惠州': [114.6204, 23.1647],
    //     '成都': [103.9526, 30.7617],
    //     '扬州': [119.4653, 32.8162],
    //     '承德': [117.5757, 41.4075],
    //     '拉萨': [91.1865, 30.1465],
    //     '无锡': [120.3442, 31.5527],
    //     '日照': [119.2786, 35.5023],
    //     '昆明': [102.9199, 25.4663],
    //     '杭州': [119.5313, 29.8773],
    //     '枣庄': [117.323, 34.8926],
    //     '柳州': [109.3799, 24.9774],
    //     '株洲': [113.5327, 27.0319],
    //     '武汉': [114.3896, 30.6628],
    //     '汕头': [117.1692, 23.3405],
    //     '江门': [112.6318, 22.1484],
    //     '沈阳': [123.1238, 42.1216],
    //     '沧州': [116.8286, 38.2104],
    //     '河源': [114.917, 23.9722],
    //     '泉州': [118.3228, 25.1147],
    //     '泰安': [117.0264, 36.0516],
    //     '泰州': [120.0586, 32.5525],
    //     '济南': [117.1582, 36.8701],
    //     '济宁': [116.8286, 35.3375],
    //     '海口': [110.3893, 19.8516],
    //     '淄博': [118.0371, 36.6064],
    //     '淮安': [118.927, 33.4039],
    //     '深圳': [114.5435, 22.5439],
    //     '清远': [112.9175, 24.3292],
    //     '温州': [120.498, 27.8119],
    //     '渭南': [109.7864, 35.0299],
    //     '湖州': [119.8608, 30.7782],
    //     '湘潭': [112.5439, 27.7075],
    //     '滨州': [117.8174, 37.4963],
    //     '潍坊': [119.0918, 36.524],
    //     '烟台': [120.7397, 37.5128],
    //     '玉溪': [101.9312, 23.8898],
    //     '珠海': [113.7305, 22.1155],
    //     '盐城': [120.2234, 33.5577],
    //     '盘锦': [121.9482, 41.0449],
    //     '石家庄': [114.4995, 38.1006],
    //     '福州': [119.4543, 25.9222],
    //     '秦皇岛': [119.2126, 40.0232],
    //     '绍兴': [120.564, 29.7565],
    //     '聊城': [115.9167, 36.4032],
    //     '肇庆': [112.1265, 23.5822],
    //     '舟山': [122.2559, 30.2234],
    //     '苏州': [120.6519, 31.3989],
    //     '莱芜': [117.6526, 36.2714],
    //     '菏泽': [115.6201, 35.2057],
    //     '营口': [122.4316, 40.4297],
    //     '葫芦岛': [120.1575, 40.578],
    //     '衡水': [115.8838, 37.7161],
    //     '衢州': [118.6853, 28.8666],
    //     '西宁': [101.4038, 36.8207],
    //     '西安': [109.1162, 34.2004],
    //     '贵阳': [106.6992, 26.7682],
    //     '连云港': [119.1248, 34.552],
    //     '邢台': [114.8071, 37.2821],
    //     '邯郸': [114.4775, 36.535],
    //     '郑州': [113.4668, 34.6234],
    //     '鄂尔多斯': [108.9734, 39.2487],
    //     '重庆': [107.7539, 30.1904],
    //     '金华': [120.0037, 29.1028],
    //     '铜川': [109.0393, 35.1947],
    //     '银川': [106.3586, 38.1775],
    //     '镇江': [119.4763, 31.9702],
    //     '长春': [125.8154, 44.2584],
    //     '长沙': [113.0823, 28.2568],
    //     '长治': [112.8625, 36.4746],
    //     '阳泉': [113.4778, 38.0951],
    //     '青岛': [120.4651, 36.3373],
    //     '韶关': [113.7964, 24.7028]
    //   };

    //   var BJData = [
    //     [{name: '首尔'}, {name: '阜阳', value: 95}],
    //     [{name: '首尔'}, {name: '邯郸', value: 90}],
    //     [{name: '首尔'}, {name: '南昌', value: 60}],
    //   ];

    //   //  var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
    //   // var planePath = 'image://http://www.bigemap.com/images/planefill.png'

    //   let a = "path://M668.24495 946.5l-6.5-4.5v-166c0-19-17-112-62.5-112-8.5 0-16.5 3-22.5 8.5v-48.5c0-11-9-20-20-20H436.74495c-11 0-20 9-20 20v48.5c-6.5-5.5-14-8.5-22.5-8.5-45.5 0-62.5 93-62.5 112.5v166l-6.5 5c-5 3.5-8.5 9.5-8.5 16v40c0 11 9 20 20 20h25.5c3.5 0.5 7 0.5 10.5 0.5 3.5 0 7 0 10.5-0.5 7-0.5 15-0.5 22 0 14 0.5 29.5 1.5 41-9.5 2-1.5 3.5-3.5 5-6h92c1.5 2 2.5 3.5 4.5 5 11.5 11 27 10 41 9.5 7-0.5 15-0.5 22 0 3.5 0 7 0.5 10.5 0.5 3.5 0 7 0 10.5-0.5h25.5c11 0 20-9 20-20v-40c-0.5-6.5-3.5-12-9-16z m-47-176.5h-44c2-20.5 13.5-53.5 22-64 8.5 10.5 20 43.5 22 64zM536.74495 644V770H456.74495v-126h80zM416.24495 770h-44c2-20.5 13.5-53.5 22-64 8.5 10.5 20 43.5 22 64z m-9 214c-4 0-8.5-0.5-13-0.5s-9 0-13 0.5c-4.5 0.5-9 0.5-13.5 0-1.5-0.5-2.5-0.5-4-0.5H356.74495v-9.5l6.5-4.5c5-4 8.5-10 8.5-16.5V810h45v174h-9.5z m129-16l-78.5 0.5-0.5-0.5V810h79v158z m100.5 15h-7c-1.5 0-2.5 0-4 0.5-4.5 0.5-9 0.5-13.5 0-8-0.5-17.5-0.5-26 0-3 0-6.5 0.5-9.5 0.5V810h45v142c0 6.5 3 12.5 8.5 16.5l6.5 4.5v10zM557.24495 382.5h-120c-11 0-20 9-20 20V570c0 11 9 20 20 20h120c11 0 20-9 20-20V402.5c0-11-9-20-20-20z m-20 167.5h-80V422.5h80V550zM431.74495 349.5c0 11 9 20 20 20h100c11 0 20-9 20-20 11 0 20-9 20-20v-55c0-11-9-20-20-20v-0.5c9-2.5 15-10 15-19.5V200c0-11-9-20-20-20s-20 9-20 20v15c-11 0-20 9-20 20H476.74495v-0.5c0-11-9-20-20-20V205l45-79.5 11.5 20c5.5 9.5 17.5 13 27.5 7.5 9.5-5.5 13-17.5 7.5-27.5L519.24495 75c-0.5-1-1.5-2.5-2.5-3.5V15c0-8.5-6.5-15-15-15s-15 6.5-15 15v57c-1 1-1.5 2-2.5 3.5l-65 115c-1.5 3-2.5 6.5-2.5 10v35c0 9 6 17 15 19.5v0.5c-11 0-20 9-20 20v55c0 10.5 9 19 20 19z m120-40c-11 0-20 9-20 20H471.74495c0-11-9-20-20-20v-15h5c11 0 19.5-8.5 20-19.5h50c0 11 9 19.5 20 19.5h5v15zM611.74495 164c8.5 2.5 16 6.5 23 12 4.5 6 8.5 12.5 10.5 19.5 1.5 4 6 5.5 10 4 2-1 3-2 4-4 2.5-7.5 6.5-14.5 11.5-21 6.5-4.5 13.5-8.5 21-10.5 3.5-1 5.5-5 4.5-9-0.5-2-2.5-3.5-4.5-4.5-8-2.5-15-6-22-11-5-6-9-13-11.5-20.5-1.5-4-6-5.5-10-4-2 1-3 2-4 4-2.5 7.5-6 14-11 20-7 5-14.5 9-22.5 11.5-3.5 1-5.5 5-4.5 8.5 1.5 3 3.5 4.5 5.5 5zM210.74495 631.5c-10-3-19.5-8-27.5-14-6.5-8-11.5-17-14.5-26.5-2-5-7.5-7-12.5-5-2.5 1-4 3-5 5-3 9.5-8 18.5-14 26-5.5 5-17.5 10.5-29 14.5-4.5 1.5-7 6.5-5.5 11.5 1 2.5 3 4.5 5.5 5.5 11.5 4.5 24 10 29.5 15.5 6 7.5 10.5 16 13.5 25 2 5 7.5 7 12.5 5 2.5-1 4-3 5-5 3.5-10 8.5-19 15-27 8-6 17.5-10.5 27-13.5 4.5-2 7-7 5-11.5-1-3-2.5-4.5-5-5.5zM917.74495 686.5c-7-2-13.5-5.5-19-9.5-4.5-5.5-8-11.5-10-18-1.5-3.5-5.5-5-9-3.5-1.5 0.5-2.5 2-3.5 3.5-2 6.5-5.5 12.5-10 18-6 4.5-13 8-20 10-3 1-5 4.5-4 7.5 0.5 2 2 3.5 4 4 7.5 2.5 14.5 6 20.5 10.5 4 5 7.5 11 9.5 17 1.5 3.5 5.5 5 9 3.5 1.5-0.5 3-2 3.5-3.5 2.5-6.5 6-13 10.5-18.5 5.5-4 12-7.5 19-9.5 3-1 5-4.5 3.5-8-1-1.5-2.5-3-4-3.5zM787.74495 871.5c-7-2-13.5-5.5-19-9.5-4.5-5.5-8-11.5-10-18-1.5-3.5-5.5-5-9-3.5-1.5 0.5-2.5 2-3.5 3.5-2 6.5-5.5 12.5-10 18-6 4.5-13 8-20 10-3 1-5 4.5-4 7.5 0.5 2 2 3.5 4 4 7.5 2.5 14.5 6 20.5 10.5 4 5 7.5 11 9.5 17 1.5 3.5 5.5 5 9 3.5 1.5-0.5 3-2 3.5-3.5 2.5-6.5 6-13 10.5-18.5 5.5-4 12-7.5 19-9.5 3-1 4.5-4.5 3.5-8-1-1.5-2.5-2.5-4-3.5zM646.74495 320c0 5.5 4.5 10 10 10s10-4.5 10-10-4.5-10-10-10-10 4.5-10 10zM361.74495 625c11 0 20-9 20-20s-9-20-20-20-20 9-20 20 9 20 20 20zM356.74495 260c8.5 0 15-6.5 15-15s-6.5-15-15-15-15 6.5-15 15 6.5 15 15 15zM299.24495 385c-7 0-12.5 5.5-12.5 12.5s5.5 12.5 12.5 12.5 12.5-5.5 12.5-12.5-5.5-12.5-12.5-12.5zM312.74495 226.5c-7-2-13.5-5.5-19-9.5-4.5-5.5-8-11.5-10-18-1.5-3.5-5.5-5-9-3.5-1.5 0.5-2.5 2-3.5 3.5a47 47 0 0 1-10 17.5c-6 4.5-13 8-20 10-3 1-5 4.5-4 7.5 0.5 2 2 3.5 4 4 7.5 2.5 14.5 6 20.5 10.5 4 5 7.5 11 9.5 17 1.5 3.5 5.5 5 9 3.5 1.5-0.5 3-2 3.5-3.5 2.5-6.5 6-13 10.5-18.5 5.5-4 12-7.5 19-9.5 3-1 5-4.5 3.5-8-1-1-2.5-2.5-4-3zM736.74495 415c0-8.5-6.5-15-15-15s-15 6.5-15 15 6.5 15 15 15 15-6.5 15-15zM696.74495 530c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zM196.74495 710c-8.5 0-15 6.5-15 15s6.5 15 15 15 15-6.5 15-15-6.5-15-15-15zM297.74495 866.5c-7-2-13.5-5.5-19-9.5-4.5-5.5-8-11.5-10-18-1.5-3.5-5.5-5-9-3.5-1.5 0.5-2.5 2-3.5 3.5-2 6.5-5.5 12.5-10 18-6 4.5-13 8-20 10-3 1-5 4.5-4 7.5 0.5 2 2 3.5 4 4 7.5 2.5 14.5 6 20.5 10.5 4 5 7.5 11 9.5 17 1.5 3.5 5.5 5 9 3.5 1.5-0.5 3-2 3.5-3.5 2.5-6.5 6-13 10.5-18.5 5.5-4 12-7.5 19-9.5 3-1 5-4.5 3.5-8-1-1.5-2.5-2.5-4-3.5z"
    //   let b = "path://M611.120815 202.713246H383.068413c-40.244541 105.828239-65.583697 263.825328-65.583697 442.689956 0 73.03639 4.471616 144.582242 11.924309 208.675401 0 5.962154 1.490539 11.924309 1.490538 16.395924h330.899564c1.490539-8.943231 2.981077-19.377001 2.981077-29.810772 7.452693-59.621543 10.43377-123.714702 10.43377-190.788937v-5.962154c1.490539-175.883552-23.848617-335.371179-64.093159-441.199418z m-114.77147 380.087336c-41.73508 0-74.526929-32.791849-74.526929-74.526928s32.791849-74.526929 74.526929-74.526929 74.526929 32.791849 74.526929 74.526929c1.490539 41.73508-32.791849 74.526929-74.526929 74.526928zM640.931587 962.887918H353.257642l-20.86754-81.979621h329.409025zM810.852984 699.062591l-14.905386 208.6754-120.733624-58.131004v-5.962154c7.452693-59.621543 10.43377-123.714702 10.43377-190.788938l125.20524 46.206696zM496.349345 61.112082c43.225619 0 83.47016 49.187773 114.77147 131.167394H383.068413c31.30131-81.979622 70.055313-131.167394 113.280932-131.167394zM186.317322 703.534207l120.733624-58.131005c0 73.03639 4.471616 144.582242 11.924309 208.675401l-137.129549 52.16885 4.471616-202.713246z"
    //   let planePath = a  
    //   var convertData = function (data) {
    //       var res = [];
    //       for (var i = 0; i < data.length; i++) {
    //           var dataItem = data[i];
    //           var fromCoord = geoCoordMap[dataItem[0].name];
    //           var toCoord = geoCoordMap[dataItem[1].name];
    //           if (fromCoord && toCoord) {
    //               res.push({
    //                   fromName: dataItem[0].name,
    //                   toName: dataItem[1].name,
    //                   coords: [fromCoord, toCoord]
    //               });
    //           }
    //       }
    //       return res;
    //   };

    //   var color = ['#a6c84c', '#ffa022', '#46bee9'];
    //   var series = [];
    //   [['北京', BJData]].forEach(function (item, i) {
    //       series.push(
    //         // 飞行图案后面的弧
    //         {
    //               name: item[0],
    //               type: 'lines',
    //               coordinateSystem: 'leaflet',
    //               zlevel: 1,
    //               effect: {
    //                   show: true,
    //                   period: 3, //弧飞行的速度
    //                   trailLength: 0.7,
    //                   color: 'red',
    //                   symbolSize: 3
    //               },
    //               lineStyle: {
    //                   normal: {
    //                       color: color[i],
    //                       width: 0,
    //                       curveness: 0.2
    //                   }
    //               },
    //               data: convertData(item[1])
    //           },
    //           // 线
    //           {
    //               name: item[0],
    //               type: 'lines',
    //               coordinateSystem: 'leaflet',
    //               zlevel: 2,
    //               symbol: ['none', planePath],  //修改线段两头的样式  箭头arrow 不展示none 也可以自定义
    //               symbolSize: 0, //修改线段两头的大小
    //               // 图属性
    //               effect: {
    //                   show: true,
    //                   period: 3,  //飞行的速度
    //                   trailLength: 0,
    //                   // symbol: planePath,  //线上面的图
    //                   symbol: 'https://wimg.588ku.com/gif620/22/02/14/206b23069c4c61559d5144d2d495ba37.gif',  //线上面的图
    //                   symbolSize: 20,
    //                   color:'red'  //图颜色
    //               },
    //               //线属性
    //               lineStyle: {
    //                   normal: {
    //                       color: '#ccc', 
    //                       width: 10,
    //                       opacity: 0.6,
    //                       curveness: 0.2
    //                   }
    //               },
    //               data: convertData(item[1])
    //           },
    //           // 城市点
    //           {
    //               name: item[0],
    //               type: 'effectScatter',
    //               coordinateSystem: 'leaflet',
    //               zlevel: 2,
    //               rippleEffect: {
    //                   brushType: 'stroke'
    //               },
    //               label: {
    //                   normal: {
    //                       show: true,
    //                       position: 'right',
    //                       formatter: '{b}'
    //                   }
    //               },
    //               symbolSize: function (val) {
    //                   return 8;
    //               },
    //               itemStyle: {
    //                   normal: {
    //                       color: color[i]
    //                   }
    //               },
    //               data: item[1].map(function (dataItem) {
    //                   return {
    //                       name: dataItem[1].name,
    //                       value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
    //                   };
    //               })
    //           }
    //         );
    //   });

    //   let option = {
    //       legend: {
    //           orient: 'vertical',
    //           top: 'top',
    //           left: 'right',
    //           data: ['北京 Top10'],
    //           textStyle: {
    //               color: '#fff'
    //           },
    //           selectedMode: 'multiple',
    //           backgroundColor: 'rgba(128, 128, 128, 0.5)'
    //       },

    //       series: series
    //   };
    //   BM.supermap.echartsLayer(option).addTo(map);

    // }
  },

  watch:{},
  computed:{},

  created(){},
  mounted(){
    this.initMap()
  },
  beforeDestroy(){}

}

</script>

<style scoped lang="less">
.select{
  position: absolute;
  top: 20px;
  left: 60px;
  z-index: 100;
}

#bigemap { position: absolute; top: 0; bottom: 0; width: 100%; }
 /* 活跃图标所需样式 */
 .pulse-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #2f8;
  position: relative;
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
}

.pulse-icon:after {
  content: '';
  box-shadow: 0 0 6px 2px #2f8;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 1.1s;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  height: 300%;
  width: 300%;
  animation: pulsate 2s infinite;
  position: absolute;
  margin: -100% 0 0 -100%;
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    filter: alpha(opacity=0);
  }

  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    filter: alpha(opacity=0);
  }
}
</style>